<!DOCTYPE html>
<html>

<head>
    <title>Multiple Links, Single Rollover </title>
    <style>
        body {
            background-color: #EC9;
        }
        
        img {
            border-width: 0;
        }
        
        #captionDiv {
            float: right;
            width: 210px;
            margin: auto 50px;
        }
        
        #captionField {
            margin: 20px auto;
            width: 208px;
            height: 27px;
        }
        
        #inventionDiv {
            width: 375px;
            margin-left: 20px;
        }
        
        #heading {
            margin-bottom: 20px;
            width: 375px;
            height: 26px;
        }
    </style>
</head>

<body>
    <div id="captionDiv">
        <img src="/assert/img/hq.jpeg" width="144" height="219" alt="hq">
        <img src="/assert/img/hq.jpeg" id="captionField" alt="Text Field">
    </div>
    <div id="inventionDiv">
        <h2>Leonardo's Inventions</h2>
        <a href="flyPage.html" class="captionField" id="flyer"><img src="/assert/img/flyer.jpg" width="293" height="165" alt="Flying Machine" id="flyerImg"></a>
        <a href="tankPage.html" class="captionField" id="tank"><img src="/assert/img/tank.jpg" width="325" height="92" alt="Tank" id="tankImg"></a>
        <a href="heliPage.html" class="captionField" id="helicopter"><img src="/assert/img/helicopter.jpg" width="224" height="160" alt="Helicopter" id="helicopterImg"></a>
    </div>
    <script>
        window.onload = rolloverInit;

        function rolloverInit() {
            for (var i = 0; i < document.links.length; i++) {
                var linkObj = document.links[i];
                if (linkObj.className) {
                    var imgObj = document.getElementById(linkObj.className);
                    if (imgObj) {
                        setupRollover(linkObj, imgObj);
                    }
                }
            }
        }

        function setupRollover(theLink, textImage) {
            theLink.imgToChang = new Array();
            theLink.outImg = new Array();
            theLink.overImg = new Array();
            theLink.imgToChang[0] = textImage;
            theLink.onmouseout = rollOut;
            theLink.onmouseover = rollOver;
            theLink.outImg[0] = new Image();
            theLink.outImg[0].src = textImage.src;
            theLink.overImg[0] = new Image();
            theLink.overImg[0].src = document.getElementById(theLink.id + "Img").src;
            if (document.getElementById(theLink.id + "Img")) {
                theLink.imgToChang[1] = document.getElementById(theLink.id + "Img");
                theLink.outImg[1] = new Image();
                theLink.outImg[1].src = theLink.imgToChang[1].src;
                theLink.overImg[1] = new Image();
                theLink.overImg[1].src = "/assert/img/" + theLink.id + "1.jpg";
            }

            function rollOut() {
                for (var i = 0; i < this.imgToChang.length; i++) {
                    theLink.imgToChang[i].src = this.outImg[i].src;
                }
            }

            function rollOver() {
                for (var i = 0; i < this.imgToChang.length; i++) {
                    theLink.imgToChang[i].src = this.overImg[i].src;
                }
            }

        }
    </script>
</body>

</html>